<template>
  <div class="cart">
    <div class="title">
      <div>
        <span style="margin-right: 30px;">商品总数</span>
        <span><el-tag type="danger" style="font-size: 30px;">{{ total }}</el-tag></span>
      </div>
      <el-button type="danger" style="float: right;">立即购买</el-button>
    </div>
    <div class="content">
      <div class="outbox">
        <el-row :gutter="10">
          <el-col class="colStyle" :span="8" v-for="(item, index) in cartInfo" :key="index" style="margin: 10px 0;">
            <el-card :body-style="{ padding: '0px' }" style="cursor: pointer;">
              <img :src="item.cake.imgUrl" class="image">
              <div style="padding: 14px;">
                <span style="font-size: 14px;">{{ item.cake.cakeName }}</span>
                <div class="hezi" style="margin: 10px 0;">
                  <span style="font-size: 18px; color: #f56c6c;">￥{{ item.totalPrice }}</span>
                  <span style="font-size: 18px; color: #909399;">数量：{{ item.count }}</span>
                </div>
                <div class="bottom clearfix">
                  <el-button @click="deleteHandle(item.id)" type="plain" size="small"
                    style="color: #f56c6c; float: right; border: 1px solid #f56c6c;">移除商品</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="bottom">
      <center>
        <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="total">
        </el-pagination>
      </center>

    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
//按需引入lodash节流函数
import throttle from "lodash/throttle";
//按需引入lodash防抖函数
import debounce from "lodash/debounce";
import { getCake, getShopCart, deleteCake } from "@/api/index"
export default {
  name: "ShopCart",
  data() {
    return {
      pageNum: 1,
      pageSize: 6,
      total: 0,
      cartInfo: []
    }
  },
  //组件挂载完毕,获取购物车的数据
  mounted() {
    //获取购物车的数据
    this.getData();
    this.getShopCartData()
  },
  computed: {
    ...mapGetters(["CartInfo"]),
    //购物车的数据
    cartInfoList() {
      return this.CartInfo.cartInfoList || [];
    },
    //购物车商品总价
    totalPrice() {
      return this.cartInfoList.reduce((a, b) => a + b.skuPrice * b.skuNum, 0);
    },
    isCartChecked() {
      //购物车里面的数据进行过滤(勾选)，如果勾选的商品与购物车商品总数相等。全选勾选！相反不够！！！
      return this.cartInfoList.filter(item => item.isChecked == '1').length === this.cartInfoList.length;
    }
  },
  methods: {
    getShopCartData() {
      getShopCart(this.pageNum, this.pageSize).then(res => {
        this.cartInfo = res.data.records
        this.total = res.data.total
      })
    },
    deleteHandle(id) {
      deleteCake(id).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
      this.getShopCartData()
    },
    //获取购物车的数据请求函数
    getData() {
      this.$store.dispatch("getShopCart");
    },
    //修改商品数据->加的操作
    async addSkuNum(cart) {
      //整理参数
      let params = { skuId: cart.skuId, skuNum: 1 };
      //发请求:通知服务器修改当前商品的个数
      //再次获取购物车的最新的数据：保证这次修改数据完毕【成功以后在获取购物车数据】
      try {
        //修改商品个数成功
        await this.$store.dispatch("addOrUpdateCart", params);
        //再次获取最新的购物车的数据
        this.getData();
      } catch (error) {
        alert("修改数量失败");
      }
    },
    //修改商品数据-减的操作
    minusSkuNum: throttle(async function (cart) {
      if (cart.skuNum > 1) {
        //整理参数:至少加入购物车的数量最低1个
        let params = { skuId: cart.skuId, skuNum: -1 };
        //修改商品的数据
        try {
          //修改商品的个数、成功以后再次获取购物车的数据
          await this.$store.dispatch("addOrUpdateCart", params);
          this.getData();
        } catch (error) { }
      }
    }, 2000),
    changeSkuNum: debounce(async function (cart, e) {
      //整理参数
      let params = { skuId: cart.skuId };
      //计算出SkuNum携带的数据
      let userResultValue = e.target.value * 1;
      //用户输入完毕，最终结果【非法条件】
      if (isNaN(userResultValue) || userResultValue < 1) {
        params.skuNum = 0;
      } else {
        //正常情况
        params.skuNum = parseInt(userResultValue) - cart.skuNum;
      }
      //发请求：修改商品的个数
      try {
        //修改商品的个数、成功以后再次获取购物车的数据
        await this.$store.dispatch("addOrUpdateCart", params);
        this.getData();
      } catch (error) { }
    }, 500),
    //删除某一个商品
    async deleteCartById(cart) {
      //整理参数
      let skuId = cart.skuId;
      try {
        //删除商品成功
        await this.$store.dispatch("deleteCartById", skuId);
        //再次获取购物车最新的数据
        this.getData();
      } catch (error) {
        alert("删除失败");
      }
    },
    //修改某一个商品的勾选的状态
    async changeChecked(cart, e) {
      //整理参数
      let params = {
        skuId: cart.skuId,
        isChecked: e.target.checked ? "1" : "0",
      };
      //发请求:修改商品的勾选的状态
      try {
        await this.$store.dispatch("changeChecked", params);
        this.getData();
      } catch (error) { }
    },
    //全选的业务
    async updateAllChecked(e) {
      //获取全选的复选框勾选的状态,接口需要的1|0
      let isChecked = e.target.checked ? "1" : "0";
      try {
        //await等待成功:购物车全部商品勾选状态成功以后
        await this.$store.dispatch("allUpdateChecked", isChecked);
        this.getData();
      } catch (error) {
        alert('修改失败');
      }
    },
    //删除选中的商品
    async deleteAllCart() {
      try {
        //等待全部勾选商品删除以后
        await this.$store.dispatch('deleteAllCart');
        //再次获取购物车的数据
        this.getData();
      } catch (error) {
        alert('删除失败');
      }
    }
  },
};
</script>

<style lang="less" scoped>
.cart {
  width: 1200px;
  margin: 0 auto;
}

.title {
  font-size: 30px;
  position: fixed;
  bottom: 10px;
  z-index: 999999;
  background-color: #ecf5ff;
  width: 1200px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 5px 5px #c6e2ff;
  padding: 0 30px;
}

.content {
  margin-top: 20px;

  .outbox {

    .image {
      width: 100%;
      height: 300px;
    }

  }
}

.hezi {
  display: flex;
  justify-content: space-between;
}

.bottom {
  width: 100%;
  margin-bottom: 10px;
}

.colStyle {
  transition: all .3s;
  border: 1px solid transparent;
  border-radius: 10px;

}

.colStyle:hover {
  transform: scale(1.01);
  border: 1px solid #66b1ff;
  box-shadow: 0 5px 5px 5px #efefef;
}
</style>